<template>
  <Card>
    <div class="md:flex">
      <div :id="props.conditionName" :style="chartStyle"></div>
    </div>
  </Card>
</template>

<script lang="ts">
/* eslint-disable */
import { Card } from 'ant-design-vue';
import { defineComponent, onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';
import { QueryMetricsConditionReq } from '/@/api/maintenance-center/skywalking/dashboard/model/apmModel';
import { getListMetricsValues } from '/@/api/maintenance-center/skywalking/dashboard/apm';
import { singleLineMap } from '../dashboard/apm/apm.data';

export default defineComponent({
  components: {
    Card,
  },
  props: {
    page: String,
    start: String,
    end: String,
    step: String,
    serviceName: String,
    serviceInstanceName: String,
    endpointName: String,
    conditionName: String,
  },
  setup(props, { emit }) {
    let lineChartName = props.conditionName;

    var option;

    const chartStyle = ref('width: 800%; height: 150%');

    const chartMap = {
      global: 'width: 800%; height: 450%',
      service: 'width: 800%; height: 150%',
      instance: 'width: 800%; height: 250%',
      endpoint: 'width: 800%; height: 250%',
    };

    const specialMetrics = ['service_apdex', 'service_sla', 'service_instance_sla', 'endpoint_sla'];

    const dividerMap = {
      service_apdex: 10000,
      service_sla: 100,
      service_instance_sla: 100,
      endpoint_sla: 100,
    };

    watch(
      () => [
        props.page,
        props.start,
        props.end,
        props.step,
        props.serviceName,
        props.serviceInstanceName,
        props.endpointName,
        props.conditionName,
      ],
      (val, prevVal) => {
        console.log('SingleLineChart 子组件监听父组件值变化', val);
        let serviceName = val[4];

        let isServiceNameUndefined =
          serviceName == '' || serviceName == null || serviceName == undefined;

        if (!ifDateUndefined(val[1], val[2], val[3]) && !isServiceNameUndefined) {
          let page = val[0];
          let serviceInstanceName = val[5];
          let endpointName = val[6];
          let conditionName = val[7];

          chartStyle.value = chartMap[page];

          let queryMetricsConditionReq: QueryMetricsConditionReq = {
            duration: {
              start: val[1],
              end: val[2],
              step: val[3],
            },
            condition: {
              name: conditionName,
              entity: {
                normal: true,
                scope: singleLineMap[page][conditionName].scope,
                serviceName: serviceName,
              },
            },
          };

          if (
            serviceInstanceName != null &&
            serviceInstanceName != undefined &&
            serviceInstanceName != ''
          ) {
            queryMetricsConditionReq.condition.entity.serviceInstanceName = serviceInstanceName;
          }

          if (endpointName != null && endpointName != undefined && endpointName != '') {
            queryMetricsConditionReq.condition.entity.endpointName = endpointName;
          }

          console.log('SingleLineChart 子组件监听父组件值变化 请求参数', queryMetricsConditionReq);

          getListMetricsValues(queryMetricsConditionReq).then((res) => {
            let lineChartData;

            if (specialMetrics.includes(conditionName)) {
              lineChartData = res.values.map((item) => item / dividerMap[conditionName]);
            } else {
              lineChartData = res.values;
            }

            let times = res.times;
            let values = {
              data: lineChartData,
              name: conditionName,
              type: 'line',
              showSymbol: false,
            };

            let lineChartDom = document.getElementById(lineChartName);
            let myChart = echarts.init(lineChartDom);

            option = {
              title: {
                text: singleLineMap[page][conditionName].title,
                textStyle: {
                  color: '#666666',
                  fontWeight: 'lighter',
                  fontSize: 13,
                },
              },
              grid: {
                top: '25%',
                left: '3%',
                right: '8%',
                bottom: '3%',
                containLabel: true,
              },
              tooltip: {
                trigger: 'axis',
              },
              xAxis: {
                type: 'category',
                data: times,
              },
              yAxis: {
                type: 'value',
              },
              series: values,
            };

            option && myChart.setOption(option);
          });
        }
      },
      { immediate: true, deep: true }
    );

    function ifDateUndefined(start: string, end: string, step: string) {
      let isStartUndefined = start == '' || start == null || start == undefined;
      let isEndUndefined = end == '' || end == null || end == undefined;
      let isStepUndefined = step == '' || step == null || step == undefined;
      if (isStartUndefined || isEndUndefined || isStepUndefined) {
        return true;
      }
      return false;
    }

    onMounted(() => {});

    return {
      props,
      chartStyle,
      lineChartName,
    };
  },
});
</script>
